import React, { useState } from 'react'
import { useEmberboxStore } from '../../hooks/store'


const SpeedAndTime = ({ setStartExit }: any) => {

    return <>
        <div className='w-full h-[4.14rem] bg-white  rounded-[2rem]  flex   justify-center items-center gap-2'  >
            <div className='border-purple bg-second w-[3.64rem] h-[3.64rem] rounded-full  flex justify-center items-center
            text-[#3734A9] font-[700]'
                onClick={() => setStartExit(true)}
            >
                退出
            </div>
            <div className='w-[15rem] text-center font-bold text-[1rem] text-[#000]'>
                剩余
                <span className='text-[1.4rem]'>165</span>
                米
                <span className='text-[1.4rem]'>1</span>
                分
                <span className='text-[1.4rem]'>23</span>
                秒
            </div>
            <div className='bg-[#52F4FF] w-[3.64rem] h-[3.64rem] rounded-full  flex justify-center items-center '>
                中速
            </div>
        </div>
    </>

}


const Exit = ({ setStartExit }: any) => {
    const store: any = useEmberboxStore()
    return <>
        <div className='w-full h-[4.14rem]  rounded-[2rem]  flex   justify-center items-center gap-2'  >
            <div className='border-purple bg-prime w-[10.57rem] h-[3.29rem]
            text-[#3734A9] font-[700]
            rounded-full  flex justify-center items-center'
                onClick={() => store.setState('Hold')}
            >
                退出
            </div>
            <div className='border-purple bg-prime w-[10.57rem] h-[3.29rem] rounded-full  flex justify-center items-center'
                onClick={() => setStartExit(false)}
            >
                取消
            </div>
        </div>

    </>
}

const index = () => {

    const [startExit, setStartExit] = useState(false)

    return (
        <div className='bg-second color-prime min-h-0  rounded-t-[1.14rem] fixed  inset-x-0 bottom-0 px-4 py-8 
        flex flex-col justify-start items-center  select-none gap-2
         text-xs '>
            <div className='w-full flex '>
                <img className='w-4 ml-4' src="/navigiting/path@2x.png" alt="" />
                <span>F2-挂号收费处</span>
                <span>(住院处)</span>
            </div>
            {!startExit && <SpeedAndTime setStartExit={setStartExit} />}
            {startExit && <Exit setStartExit={setStartExit} />}

        </div>
    )
}

export default index